<template>
  <div class="wrapper">
    <el-form :inline="true">
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          @change="_reset"
          size="small"
          style="height:34px;width:300px"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="注册开始日期"
          end-placeholder="注册结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入邀请人"
          clearable
          style="width:300px"
          v-model="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          style="width:60px"
          @click="_reset">
          <i class="el-icon-search"></i>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-table :data="userList"
          max-height="550">
          <el-table-column label="被邀请人ID"
            prop="userId"></el-table-column>
          <el-table-column label="昵称"
            prop="nickName"></el-table-column>
          <el-table-column label="姓名"
            prop="name"></el-table-column>
          <el-table-column label="性别"
            prop="sex"></el-table-column>
          <el-table-column label="VIP等级"
            prop="vip"></el-table-column>
          <el-table-column label="注册时间"
            prop="login"></el-table-column>
          <el-table-column label="邀请人"
            prop="referrer"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="fl">
        <p>会员总数:{{userNum}}</p>
      </el-form-item>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { invoiceUserList } from "@/public/js/performance";
export default {
  components: {},
  props: {},
  data() {
    return {
      startEndTime: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      search: "",
      userList: [],
      userNum:0
    };
  },
  watch: {},
  computed: {},
  methods: {
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._invoiceUserList();
    },
    //获取列表数据
    _invoiceUserList() {
      invoiceUserList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : "",
        search: this.search
      }).then(res => {
        console.log(res);
        this.total = res.data.total;
        this.userList = res.data.userList;
        this.userNum = res.data.userNum
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._invoiceUserList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this._invoiceUserList();
    }
  },
  created() {
    this._invoiceUserList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>